<template>
	<view class="container">
		<!-- 头部 -->
		<view class="container-top">
			<view class="search-box">
				<view class="fill" :style="{height: navbarHeight + 'px'}"></view>
				<view class="title" :style="{height: titleBarHeight + 'px',display:'flex','align-items':'center'}">
					<image src="@/static/home-logo.png" mode="" style='width:280rpx;height:56rpx;margin-right:20rpx;margin-left:10rpx;'></image>
					<uv-input v-model="key" class="search_input" placeholder="请输入" :prefixIcon="searshs"  @confirm="searsh"
										prefixIconStyle="width:28rpx;height:28rpx;"></uv-input>
				</view>
			</view>
			<uv-swiper :list="map" keyName="url" circular width="686rpx" @click='(e)=>goExcelBook(e)'
				height="460rpx"></uv-swiper>
			<uv-tabs :list="items" :current="current" keyName="dictionaryName"  @click="onClickItem"
				style="position: relative;z-index: 1;background:red!important;" :itemStyle="{
				padding: '0 19rpx',
				height: '84rpx'}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)',
				fontSize: '26rpx'
			}" :activeStyle="{
			color: '#303133',
			fontWeight: 'bold',
			fontSize: '30rpx',
			transform: 'scale(1.05)'
		}"></uv-tabs>
		</view>
		<!-- 内容 -->
		<!-- <view class="container-main" v-if='listdata.length'> -->
			<scroll-view :scroll-top="scrollTop" 
				style="flex:1;min-height:0"
				scroll-y="true"
				class="scrool-more" scroll-with-animation="true"
				scrolltop='0'
				@scrolltolower="lowerBottom"
				>
				<flow :listdata="listdata" @submit="getHomeBookList"></flow>
			</scroll-view>
		<!-- </view> -->
	</view>
</template>

<script setup>
	import flot from '@/components/flow/flow.vue'
	import {
		computed,
		onMounted,
		reactive,
		ref,
		// vShow
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// import {
	// 	request
	// } from '../../util/request.ts'
	import Request from '@/js_sdk/luch-request/luch-request/index.js' // 下载的插件
	const http = new Request();
	import useGetGlobalProperties from '@/util/useGlobal.js'
	const urls = useGetGlobalProperties().$https;
	const url = useGetGlobalProperties().$httpUrl;
	const wxurl = useGetGlobalProperties().$httpUrlWx;
	
	const searshs = wxurl + '/search.png';
	const hots = wxurl + '/hot.png';
	const key = ref();
	const bookType = ref();
	const navbarHeight = ref(0)
	//计算刘海状态栏
	navbarHeight.value = uni.getSystemInfoSync().statusBarHeight
	//计算胶囊区域的高度
		let {
			top,
			height
		} = uni.getMenuButtonBoundingClientRect()
	const titleBarHeight = computed(() => {
		return (top - navbarHeight.value) * 2 + height
	})
	
	const searsh = () => {
		uni.navigateTo({
			url: '/pages/searsh/searsh?keys=' + key.value
		})
	}
	const autoplay = false;
	const data = reactive({
		loginCode: '',
		});
	onMounted(() => {
		isRegister();
		init();
	})
	const dataForm = reactive({
		current: 0,
		dataTypeId: '',
		bookTypeId: ''
	})
	const currents = ref(1)
	const changeSwiper = (e) => {
		let bookId = topicSwiper.value[e].bookId;
		uni.navigateTo({
			url: `/pages/special/list?bookId=${bookId}`
		})
	}
	
	const changeSwiper1 = (e) => {
		let urls = map.value[e].url;
		if(urls=='专题')
		{
		let bookId = topicSwiper.value[e-1].bookId;
		
		uni.navigateTo({
			url: `/pages/special/list?bookId=${bookId}`
		})	
		}
	}
	const isRegister = async () => {
		uni.login({
			provider: 'weixin',
			onlyAuthorize: true,
			success: res => {
				data.loginCode = res.code;
				console.log("code=" + res.code);
				uni.request({
					url: '/api/wxApi/user_login/isRegister',
					method: 'POST',
					data: {
						code: res.code
					},
					success: (res) => {
						uni.navigateTo({
							// url: '/pages/admin/login'
						})
					}
				})
			}
		})
	}
	const book = useGetGlobalProperties().$book;
	const audio = useGetGlobalProperties().$audio;
	const journal = useGetGlobalProperties().$journal;
	const vedio = useGetGlobalProperties().$vedio;
	const search = () => {
		request('/auth/oauth2/token?grant_type=password', 'POST', option)
	}
	const options = reactive({
		username: 'admin',
		password: 'JFat0Zdc',
		scope: 'server'
	})
	const map = ref([]);
	const topicSwiper = ref([]);
	const init = async () => {
		uni.showLoading({
			title: '正在加载中',
		})
		let code = '';
		// 首页banner列表
		http.get('/homepage/getBanner?position=' + '1', {}).then(res => {
			map.value = res.data.data;
			let imageUrl = 'https://nongjiashuwu.shuzinongyue.com:8448';
			map.value.forEach(item => {
				item.carouselMapUrl = imageUrl + item.carouselMapUrl
			})
		}).catch(err => {
		})
		// 分类列表
		uni.request({
			// url: urls + '/ruralLibrary/bookDataType/list',/api/dataDictionary/queryListByCode
			url: urls + '/api/dataDictionary/queryListByCode?',
			method: 'GET',
			data:{
				code:'HOMETYPE'
			},
			success: (res) => {
				console.log('type', res.data.data);
				items.value = res.data.data;
				bookType.value =items.value[0].dictionaryCode
				getHomeBookList()
			}
		})
		uni.setStorageSync('book', book)
		uni.setStorageSync('audio', audio)
		uni.setStorageSync('journal', journal)
		uni.setStorageSync('vedio', vedio)
		setTimeout(function() {
			uni.hideLoading();
		}, 900);
	}
	const user = uni.getStorageSync('userInfo');
	// 根据tabs切换查询分类列表
	const getHomeBookList = ()=>{
		uni.request({
			url: urls + '/homepage/getBookByType',
			method: 'POST',
			data: {
				bookType:bookType.value,
				pageNum: currents.value,
				pageSize: 50,
				openId:user.openId
			},
			success: (res) => {
					if(currents.value == 1){
						listdata.value = res.data.data.records;
					}else{
						for (let i = 0; i < res.data.data.records.length; i++) {
							listdata.value.push(res.data.data.records[i]);
						}
					}
					
				// }else {
				// 	uni.showToast({
				// 		title: '已经到底啦',
				// 		duration: 2000,
				// 		icon: 'error'
				// 	});
				// }
			}
		})
	}

	const toVideoDetail = () => {
		uni.navigateTo({
			url: '/pages/index/videoDetails/videoDetails'
		})
	}
	const toaudioDetail = () => {
		uni.navigateTo({
			url: '/pages/index/audioDetails/audioDetails'
		})
	}
	const toBookDetail = () => {
		uni.navigateTo({
			url: '/pages/index/bookDetail/bookDetail'
		})
	}
	const toCategory = () => {
		uni.navigateTo({
			url: '/pages/category/category'
		})
	}

	onLoad((option) => {
		let params='';
		if (option.hasOwnProperty('scene')) {
			 params = decodeURIComponent(option.scene)
			
			if (params.includes('&')) {
				let array = params.split('&')
				array.forEach(a => {
					let arr = a.split('=')
					option[arr[0]] = arr[1]
				})
			} else {
				let array = params.split('=')
				option[array[0]] = array[1]
			}
			delete option.scene
			
		}
		//如果这个有值说明是后台管理生成的乡镇二维码
				if(option.q){
					params = decodeURIComponent(option.q)
					let arry =  params.split('?');
					let scene = arry[1].split('=');
					params = scene[1];
				}
		console.log(params, '------')
		// 微信扫码跳转小程序
		if(params && params.indexOf('Tiao') !== -1){
			let timeStamp = params.split('Tiao')[1]
			uni.request({
				url: urls+'/userInfo/sanQRCode',
				method: 'POST',
				data: {
					timeStamp
				},
				success: (res) => {
					if(res.data.data == true){
						uni.showModal({
							title: '提示',
							content: '是否要授权登录?',
							success: function(res) {
								if (res.confirm) {
									uni.login({
										provider: 'weixin',
										onlyAuthorize: true,
										success: res => {
											console.log(res, '登录成功')
											let code = res.code;
											console.log("code=" + res.code);
											uni.request({
												// url:  'https://weixin.shuzinongyue.com:8942/userInfo/getOpenId/' + code,
												// url:  'http://61.163.243.13:8944/userInfo/getOpenId/' + code,
												url:  urls+'/userInfo/getOpenId/' + code,
												method: 'GET',
												success: (res) => {
													if (res.data.data) {
														let openId = res.data.data.openId
														uni.request({
															url:  urls+'/userInfo/authorize',
															method: 'POST',
															data:{
																openId,
																timeStamp
															},
															success: (res) => {
																if (res.data.data) {
																	console.log('授权成功')
																	uni.showToast({
																		title: '授权成功!',
																		icon: 'success',
																		duration: 500,
																		mask: false
																	});
																}
															}
														})
													} else {
														uni.showToast({
															title: '请登录获取授权',
															icon: 'success',
															duration: 1500,
															mask: false
														});
														// uni.redirectTo({
														// 	// url: '/pages/admin/login'
														// })
													}
													uni.hideLoading();
												}
											})
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				}
			})
		}
		// console.log(option, '------')
		let r = uni.getStorageSync('userInfo');
		if (r == null || r.openId == null) {
			uni.login({
				provider: 'weixin',
				onlyAuthorize: true,
				success: res => {
					let code = res.code;
					console.log(code, '--##----')
					uni.request({
						// url: 'https://weixin.shuzinongyue.com:8942/userInfo/wxlogin',
						// url: 'http://61.163.243.13:8944/userInfo/wxlogin',
						url: 'https://wechat.shuzinongyue.com:8922/userInfo/wxlogin',
						method: 'post',
						data: {
							code: code,
							location: params
						},
						success: (res) => {
							uni.setStorageSync('userInfo', res.data.data);
						}
					})
				}
			})
		}
	})
	
	const current = ref(0);
	const typeData = ref();
	const items = ref([
		// {
		// name: '推荐',
		// }, {
		// 	name: '戏曲',
		// }, {
		// 	name: '听书'
		// }, {
		// 	name: '视频'
		// },{
		// 	name: '电子书',
		// }, {
		// 	name: '历史',
		// }, {
		// 	name: '文学'
		// }, {
		// 	name: '期刊',
		// }
	]);
	const listdata = ref([
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045108_thumb.jpg",
		// resourceName: "自动驾驶汽车对交通和城市规划的未来影响与挑战",
		// press: "分析自动驾驶汽车对未来交通和城市规划的潜在影响，探讨相关挑战。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044581_thumb.jpg",
		// resourceName: "可持续城市发展：构建环保城市的策略和实践",
		// press: "分析建设可持续城市的战略和实际方法，强调环保、资源利用和城市规划的重要性。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045190_thumb.jpg",
		// resourceName: "消灭传染病：全球卫生领域的挑战与创新",
		// press: "探讨在全球范围内消灭传染病的挑战，突出卫生领域的创新方法。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044667_thumb.jpg",
		// resourceName: "人工智能与机器学习：颠覆性技术对未来的巨大影响",
		// press: "探讨人工智能和机器学习如何在多个领域引发革命性变革，从工业到医疗，对未来产生深远影响。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044562_thumb.jpg",
		// resourceName: "生命科学的新前沿：基因编辑和生物技术的伦理挑战",
		// press: "研究生命科学领域的最新发展，聚焦基因编辑和生物技术的伦理考量，探讨科技前沿的道德挑战。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045057_thumb.jpg",
		// resourceName: "加密货币与区块链：重塑全球金融体系的力量",
		// press: "解析加密货币和区块链技术对金融体系的颠覆作用，重新定义了全球金融交易方式。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044716_thumb.jpg",
		// resourceName: "量子计算与量子技术应用的前沿探索",
		// press: "深入研究量子计算和量子技术的前沿，展示这一领域的创新及其应用前景。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044779_thumb.jpg",
		// resourceName: "气候变化缓解的复杂性：全球视角下的挑战与机遇",
		// press: "探讨应对气候变化的复杂性，强调全球合作，突出应对挑战所蕴含的机遇。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044956_thumb.jpg",
		// resourceName: "虚拟现实与医疗保健的交汇：革命性地改变患者护理",
		// press: "介绍虚拟现实技术如何在医疗领域革命性地改善患者护理和治疗方法。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044607_thumb.jpg",
		// resourceName: "生物工程的突破：改变医学和人类增强的科技",
		// press: "研究生物工程领域的创新，关注其在医学和人类增强领域的重要作用。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045083_thumb.jpg",
		// resourceName: "社交媒体的演进及其对沟通和社会的影响",
		// press: "追溯社交媒体的发展历程，探讨其对人际沟通和社会动态的广泛影响。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044643_thumb.jpg",
		// resourceName: "元宇宙时代：在工作、教育和娱乐的虚拟世界中导航",
		// press: "介绍元宇宙时代，强调虚拟世界在工作、教育和娱乐中的多样应用。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044936_thumb.jpg",
		// resourceName: "通用人工智能：人类是否准备好面对超智能机器？",
		// press: "研究通用人工智能的发展，引发思考人类面对超级智能机器的准备程度。"
	 //  },
	 //  {
		// cover: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg",
		// resourceName: "超越火星：人类太空探索和星际旅行的未来",
		// press: "展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。"
	 //  }
	]); 
	const flushs = ref(true);
	// 上滑加载
	const lowerBottom=()=>{
		console.log('下拉了')
		currents.value++;
		getHomeBookList()
	};
	// 切换类型
	const onClickItem = (e) => {
		console.log("e", e)
		if (current.value !== e.currentIndex) {
			current.value = e.index;
			currents.value = 1;
			// uni.showLoading({
			// 	title: '正在加载中'
			// })
			// let id = '';
			// const book = uni.getStorageSync('book')
			// const audio = uni.getStorageSync('audio')
			// const journal = uni.getStorageSync('journal')
			// const vedio = uni.getStorageSync('vedio')
			// if (current.value == 0) {
			// 	// id = book;
			// } else if (current.value == 1) {
			// 	// id = audio;
			// } else if (current.value == 3) {
			// 	// id = journal;
			// } else if (current.value == 2) {
			// 	// id = vedio;
			// }
			let users = uni.getStorageSync('userInfo');
			// 分类列表
			bookType.value = e.dictionaryCode
			getHomeBookList()
		}
	};
	// 跳转导出页面//
	const goExcelBook = (e) => {
		if(map.value[e].target == 'shudan'){
			uni.navigateTo({
				url: '/pages/excelBook/excelBook'
			})
		}
		
	}
</script>
<style lang="scss" scoped>
	.container {
		width:100%;
		height: 100vh;
		margin-top: 0%;
		background: linear-gradient(180deg, #21BAD4 0%, #259BFD 5%, #71ACFC 10%, #F7FAFF 20%);
		font-size: 20px;
		// line-height: 24px;
		font-family: my-font;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	.container-top{
		width: 100%;
		min-height: 520rpx;
		.search-box{
			width:73%;
			height:180rpx;
			position:absolute;
			top:0;
			left:0;
			z-index:100;
		}
	}
</style>
<style lang="scss">
	.container{
		.uv-tabs__wrapper__nav {
			dispaly:flex;
			justify-content: space-between!important;
		}
		.uv-swiper__wrapper__item, .uv-swiper__wrapper {
			height:480rpx!important;
		}
		.uv-swiper__wrapper__item__wrapper__image {
			height:100%!important;
		}
	}
	.search-box {
		.uv-input{
			width:100rpx!important;
			line-hegiht:50rpx!important;
			background:#ffffff!important;
			border:0!important;
			border-radius: 40rpx!important;
			box-sizing: border-box;
			padding:6rpx 12rpx!important;
			input{
				font-size:22rpx!important;
				color:#333333;
			}
		}
	}
	
	::-webkit-scrollbar{
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	}
</style>